<template>
  <div class="list">
    <div class="list-header-container">
      <div class="jzt-flex-bt list-header">
        <title-view title="商品定制模版" />
        <el-button @click="handleAdd" v-if="tableData.length > 0" type="primary" style="width: 180px"
          >新建商品定制模版
        </el-button>
      </div>
      <div class="list-tips jzt-flex-bt" v-if="isShowShopTips">
        <div style="color: rgba(0, 0, 0, 0.9)" class="jzt-flex-start">
          <img src="@/assets/images/tips.png" alt="" style="width: 20px; height: 20px; margin-right: 8px" />
          <div>
            商品质保模板不会自动与产品关联，您可以在发布，修改产品信息时选择关联已经创建的质保模板，也可以在创建模板后批量关联在商品上。
          </div>
        </div>
        <div style="color: rgba(0, 0, 0, 0.6); cursor: pointer" @click="isShowShopTips = false">不再提示</div>
      </div>
    </div>
    <div
      class="list-item"
      v-if="tableData.length > 0"
      :style="{ height: isShowShopTips ? 'calc(100vh - 300px)' : 'calc(100vh - 250px)' }"
    >
      <div class="list-card" v-for="item in tableData" :key="item">
        <div class="list-content">
          <div class="jzt-flex-bt list-content-header">
            <div class="jzt-flex-start">
              <div class="list-header-line"></div>
              <div class="list-header-title">{{ item.templateName }}</div>
            </div>
            <div class="jzt-flex-start list-header-buts">
              <div @click="handleGoto(item)">
                已关联商品数 <span v-if="item.productNum">({{ item.productNum }})</span>
              </div>
              <div class="add" @click="handleAddShop(item)">添加关联商品</div>
              <div class="edit" @click="handleEdit(item)">编辑</div>
              <div @click="handleDel(item)">删除</div>
            </div>
          </div>
          <div :class="{ 'list-more-height': item.show }" class="list-more">
            <div class="list-content-item" v-for="items in item.templateDetailList" :key="items">
              <el-row :gutter="24">
                <el-col :span="6" class="text-over">
                  <el-tooltip class="box-item" effect="dark" :content="items.specificationText" placement="top">
                    <span>{{ items.specificationText }}</span>
                  </el-tooltip>
                </el-col>
                <el-col :span="10" class="text-over"
                  >单位：{{ getUnitLabel(items.productUnit) }}（每增加{{ items.addNum }}{{ getUnitLabel(items.productUnit) }}/+¥{{
                    items.addAmount
                  }}
                  、每减少{{ items.reduceNum }}{{ getUnitLabel(items.productUnit) }}/-¥{{ items.reduceAmount }}）
                </el-col>
                <el-col :span="8">
                  <RemarkEditor v-model="items.standardText" :isEdit="false" />
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="list-content-more" v-if="item.templateDetailList.length > 2">
            <div class="jzt-flex-start" style="cursor: pointer" @click="item.show = !item.show">
              <div style="margin-right: 5px">{{ item.show ? "收起更多" : "展开更多" }}</div>
              <el-icon v-if="!item.show">
                <ArrowDownBold />
              </el-icon>
              <el-icon v-else>
                <ArrowUpBold />
              </el-icon>
            </div>
          </div>
        </div>
        <div class="list-remake">
          <span>备注：</span>
          <span>{{ item.remark }}</span>
        </div>
      </div>
      <div class="pagination" v-if="tableData?.length > 0">
        <el-pagination
          v-model:current-page="tableParams.page"
          v-model:page-size="tableParams.size"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="getList"
          @current-change="getList"
        />
      </div>
    </div>
    <div style="margin-top: 50px; text-align: center" v-else>
      <el-empty description="暂无内容" class="list-empty" />
      <el-button @click="handleAdd" type="primary" style="width: 180px">新建商品定制模版</el-button>
    </div>
    <!-- 删除   -->
    <el-dialog class="del-dialog" v-model="visible" title="Tips" width="500" :before-close="handleClose">
      <template #header>
        <title-view title="删除定制模版" />
      </template>
      <div class="dialog-container">
        <div class="dialog-container-tips">
          温馨提示：您正在操作
          删除定制模版，删除后被关联的商品将不在支持定制！如需要更换到其他模版可在下方选择，不影响当前的操作。
        </div>
        <div class="dialog-container-input">
          <span class="label-name">更改到其他定制模版</span>
          <el-select v-model="otherCustomTemplateId" placeholder="选择定制模版">
            <el-option
              v-for="item in templateData"
              :key="item.customTemplateId"
              :label="item.templateName"
              :value="item.customTemplateId"
            />
          </el-select>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose" type="info" style="background: #f2f3f5; color: #1d2129;border: none">取消</el-button>
          <el-button type="primary" @click="handleConfirm"> 确定并采纳</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { ArrowDownBold, ArrowUpBold } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import RemarkEditor from "@/components/RemarkEditor";
import { configDelete, configList, templateListExclude } from "@/apis/products/shopConfig";
import { selectDictDataByType } from "@/apis/dict/dict";
import { useLocalStorage } from "@vueuse/core";

const isShowShopTips = useLocalStorage("isShowShopTips", true);
const router = useRouter();
const visible = ref(false);
const customTemplateId = ref("");
const otherCustomTemplateId = ref(null);
const tableData = ref([]);
const templateData = ref([]);
const total = ref(0);
const optionsUnit = ref([]);
const tableParams = ref({
  page: 1,
  size: 10
});
const getUnit = async () => {
  const { data } = await selectDictDataByType("shop_unit");
  optionsUnit.value = data;
};
const getTemplateList = async customTemplateId => {
  const { data } = await templateListExclude({ customTemplateId });
  templateData.value = data;
};
const getUnitLabel = unit => {
  if (unit) {
    return optionsUnit.value.find(item => item.dictValue == unit)?.dictLabel || "";
  }
};
const getList = async () => {
  const { data } = await configList(tableParams.value);
  tableData.value = data.records;
  total.value = data.total;
};

// 新增模板
const handleAdd = () => {
  router.push({ path: "/shopConfig/customization/add" });
};
// 已关联商品数
const handleGoto = item => {
  router.push({
    path: "/shopConfig/customization/RelatedProducts",
    query: { customTemplateId: item.customTemplateId }
  });
};
// 添加关联商品
const handleAddShop = item => {
  router.push({ path: "/shopConfig/customization/related", query: { customTemplateId: item.customTemplateId } });
};
// 编辑
const handleEdit = item => {
  router.push({
    path: "/shopConfig/customization/add",
    query: { customTemplateId: item.customTemplateId }
  });
};
// 删除
const handleDel = item => {
  otherCustomTemplateId.value = null;
  customTemplateId.value = item.customTemplateId;
  visible.value = true;
  getTemplateList(item.customTemplateId);
};
// 确认删除
const handleConfirm = async () => {
  await configDelete({
    customTemplateId: customTemplateId.value,
    otherCustomTemplateId: otherCustomTemplateId.value || null
  });
  visible.value = false;
  tableParams.value.page = 1;
  getList();
};
// 取消
const handleClose = () => {
  visible.value = false;
};
getUnit();
getList();
</script>

<style scoped lang="scss">
@import "index";
</style>
